<template>
    <div id="panel">
        <div id="box">
            <label for="location">地理搜索</label>
            <input type="text" id="location" v-model="searchKeyword" placeholder="请输入" @change="changeLocation" />
        </div>
        <div id="lists" v-show="showSearchList">
            <div v-for="(poi, index) in searchResults" :key="index" class="list-item" @click="flyToPoi(poi)"
                @mouseenter="hoverItem(index)" @mouseleave="unhoverItem(index)"
                :style="{ backgroundColor: hoverIndex === index ? '#46474b' : '#292b34' }" :title="poi.name">
                {{ poi.name }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ESPoi2D } from 'earthsdk3';
import { getobjm, getOrCreateSceneObj } from '../scripts/getobjm';
interface PoiItem {
    name: string;
    location: string;
    [key: string]: any;
}

const objm = getobjm();
// 创建POI兴趣点
const sceneObject = getOrCreateSceneObj(objm, ESPoi2D, "ESPoi2D1")
window.sceneObject = sceneObject;
sceneObject.mode = "P3D04";

const searchKeyword = ref('');
const searchResults = ref<any[]>([]);
const showSearchList = ref(false);
const hoverIndex = ref(-1);


// 修改地理位置
const changeLocation = async () => {
    if (!searchKeyword.value.trim()) {
        showSearchList.value = false;
        return;
    }

    const searchList = await getSearchList(searchKeyword.value);
    if (searchList.pois && searchList.pois.length) {
        searchResults.value = searchList.pois;
        showSearchList.value = true;
    } else {
        showSearchList.value = false;
    }
};

// 飞行定位到POI
const flyToPoi = (poi: PoiItem) => {
    if (!objm || !sceneObject) return;

    const [a, b] = poi.location.split(',');
    // 设置poi位置
    sceneObject.position = [Number(a), Number(b), 0];
    // 设置poi名称
    sceneObject.name = poi.name;

    objm.activeViewer.flyTo(
        {
            distance: 1000,
            heading: -90,
            pitch: -90,
            flyDuration: 1,
            hDelta: -90,
            pDelta: 1,
        },
        [Number(a), Number(b), 0]
    );

    showSearchList.value = false;
};


// 鼠标悬停列表项
const hoverItem = (index: number) => {
    hoverIndex.value = index;
};

// 鼠标离开列表项
const unhoverItem = () => {
    hoverIndex.value = -1;
};

const getSearchList = async (keyword) => {
    const baseUrl = "https://restapi.amap.com/v3/place/text?key=9f0109b9f387771cf2c28b5df88ac69d&keywords="
    const url = baseUrl + keyword
    const response = await fetch(url)
    const responseJson = await response.json();
    return responseJson
}
</script>

<style scoped>
#panel {
    position: absolute;
    top: 90px;
    left: 20px;
    color: #d6deea;
    background-color: #153651;
    padding: 15px;
    border-radius: 4px;
    z-index: 1000;
}

#box {
    display: grid;
    grid-template-columns: 90px 1fr;
    grid-row-gap: 10px;
    align-items: center;
}

#apply {
    display: flex;
    justify-content: space-between;
}

#lists {
    margin-left: 91px;
    margin-top: 5px;
    width: 195px;
    max-height: 175px;
    background-color: #292b34;
    color: #fff;
    overflow-y: auto;
}

.list-item {
    height: 35px;
    width: 100%;
    box-sizing: border-box;
    line-height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 10px;
    font-size: 13px;
    cursor: pointer;
}
</style>